<!--
  ~ Copyright 2022 Scheer PAS Schweiz AG
  ~
  ~  Licensed under the Apache License, Version 2.0 (the "License");
  ~  you may not use this file except in compliance with the License.
  ~  You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  imitations under the License.
  -->
<div id="container-grid">
  <div id="form-container">
    <form>
      <mat-form-field *ngIf="organizations.length > 1" class="mr-20">
        <mat-label>{{ 'COMMON.ORGANIZATION' | translate }}</mat-label>
        <mat-select [(ngModel)]="organizationId" name="orgSelect">
          <mat-option *ngFor="let org of organizations" [value]="org.id">
            {{ org.name }}
          </mat-option>
        </mat-select></mat-form-field
      >
      <mat-form-field>
        <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>
        <input
          id="client-input"
          matInput
          [(ngModel)]="clientName"
          name="input"
          (keyup)="applyFilter($event)" />
      </mat-form-field>
    </form>
    <button
      id="register-client-btn"
      mat-raised-button
      color="primary"
      class="ml-20"
      [disabled]="isCreateButtonDisabled()"
      (click)="addClient()">
      {{ 'COMMON.CREATE' | translate }}
    </button>
  </div>

  <p class="primary mb-0">{{ 'CLIENTS.SELECT' | translate }}</p>
  <div data-simplebar id="table-container">
    <table
      mat-table
      [dataSource]="dataSource"
      class="mat-elevation-z2 mt-20 mb-20">
      <!-- Checkbox Column -->
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <mat-radio-button
            color="primary"
            (click)="$event.stopPropagation()"
            (change)="$event ? this.selectClient(element) : null"
            [checked]="selection.isSelected(element)">
          </mat-radio-button>
        </td>
      </ng-container>

      <!-- Org Name Column - only displayed if user has more than 1 -->
      <ng-container matColumnDef="org-name">
        <th mat-header-cell *matHeaderCellDef>
          {{ 'COMMON.ORGANIZATION' | translate }}
        </th>
        <td mat-cell *matCellDef="let element">
          <span [class.is-selected]="selection.isSelected(element)">{{
            element.organizationName
          }}</span>
        </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>
          {{ 'COMMON.CLIENT' | translate }}
        </th>
        <td mat-cell *matCellDef="let element">
          <span [class.is-selected]="selection.isSelected(element)">{{
            element.name
          }}</span>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="selectClient(row)"></tr>
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" [colSpan]="displayedColumns.length">
          {{ 'COMMON.NO_DATA_FOUND' | translate }}
        </td>
      </tr>
    </table>
  </div>
</div>
